<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in cardArr" :key="item.title">
        <Card :cardData="item"></Card>
      </el-col>
    </el-row>

    <!-- 图表 -->
    <Charts :options="options"></Charts>
  </div>
</template>

<script>
// 1.导入卡片组件和图标组件
import Card from "@/components/Card/Card";
import Charts from "@/components/Charts/Charts";

// 引入获取首页图表数据，ajax的接口函数
import { getTotalData } from "@/api/order";
export default {
  components: {
    // 2.注册组件
    Card,
    Charts,
  },
  data() {
    return {
      cardArr: [
        {
          imgUrl: require("@/assets/imgs/logo.png"),
          title: "总订单",
          count: "12",
        },
        {
          imgUrl: require("@/assets/imgs/logo.png"),
          title: "总销售额",
          count: "321",
        },
        {
          imgUrl: require("@/assets/imgs/logo.png"),
          title: "今日订单数",
          count: "31231",
        },
        {
          imgUrl: require("@/assets/imgs/logo.png"),
          title: "今日销售额",
          count: "32131",
        },
      ],
      options: {
        text: "数据统计",
        lengend: ["订单", "销售额", "注册人数", "管理人数"],
        xAxisData: [],
        series: [],
      },
    };
  },

  // mountde
  async mounted() {
    let {
      totalOrder,
      totalAmount,
      todayOrder,
      totayAmount,
      xData,
      orderData,
      amountData,
    } = await getTotalData();
    // 渲染到页面
    let arr = [totalOrder, totalAmount, todayOrder, totayAmount];
    arr.forEach((v, i) => {
      // console.log(v);
      this.cardArr[i].count = v;
    });

    // 把上面的数据发送到动态组件里面，赋值给报表
    this.options.xAxisData = xData;
    this.options.series = [
      {
        name: "订单",
        type: "line",
        data: orderData,
      },
      {
        name: "销售额",
        type: "line",
        data: amountData,
      },
    ];
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>